<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网支付</title>
<base href="../">
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/pay.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<div class="header_title">
		<a href="#" target="_blank" class="location">衡阳</a>
		
		<div class="header_info">
			<div class="login_info">
				<a v-if="checkLogin" href="user.html" target="_blank" title="点击登录" >您好，[{{user.nickName}}]</a>
				<a v-else href="login.htnl" target="_blank" title="点击登录" >您好,请先登录</a>
				<a href="register.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			
			<div class="person_info">
				<span>|</span>
				<a href="front/order.html" target="_blank" href="order.html">我的订单</a>
				<span>|</span>
				<a href="" target="_blank">我的收藏</a>
				<span>|</span>
				<a href="" target="_blank">客服服务</a>
				<span>|</span>
				<a href="user.html" target="_blank">个人信息</a>
			</div>
		</div>
	</div>
	
	<!-- 搜索区域  -->
	<div class="search">
		<div class="search_left">
			<a href="index.html" title="首页">
				<img src="images/logo.png" />
			</a>
			
		</div>
		
		<div class="search_center">
			<div class="search_div">
				<input type="search" placeholder="请输入您要搜索的内容..." />
				<input type="button" value="搜  索" />
			</div>
		</div>
		
		<div class="search_right">
			<i>{{count}}</i>
			<a href="front/cart.html" target="_blank">我的购物车</a>
		</div>
	</div>
	
	<!-- 类型导航 -->
	<div class="nav">
		<a href="javascript:void(0)" :class="{selected: tno == ''}" @click="findByType('')">全部</a>
		<a :class="{selected: tno == item.tno}" v-for="item in types" href="javascript:void(0)" 
			@click="findByType(item.tno)">{{item.tname}}</a>
	</div>
	
	<div class="v_nav">
		<ul>
			<li v-for="item in types" @click="findByType(item.tno)">
				<img :src="'../' + item.pic" />
				<span :class="{selected: tno == item.tno}">{{item.tname}}</span>
			</li>
		</ul>
	</div>
</header>

     
<!-- 收货地址 -->
<article id="app">
	<h3 class="common_title">确认收货地址</h3>
	
	<div class="common_list_con clearfix">
	    <dl id="addr_list">
	        <dt>寄送到：</dt>
	        <dd v-for="addr in addrs" :class="{current_location: addr.flag == 1}" :data-ano="addr.ano">
	        	{{addr.province}}&nbsp; {{addr.city}}&nbsp; {{addr.area}}&nbsp; {{addr.addr}}&nbsp;({{addr.name}}收)&nbsp; {{addr.tel}} 
	        </dd>
		</dl>
	    <a href="javascript:showAddrDiv()" class="edit_site">编辑收货地址</a>
	</div>
	
	<div id="addr_div">
	    <img src="images/close.png" title="关闭" onclick="hiddenDiv()"/>
	    <form id="myform">
	        <ul>
	            <li>
	                <label for="addr_name">收货人：</label>
	                <input id="addr_name" name="name" type="text" placeholder="请输入收货人姓名..." />
	            </li>
	            <li>
	                <label for="addr_tel">联系方式：</label>
	                <input id="addr_tel" name="tel" type="text" placeholder="请输入收货人联系方式..." />
	            </li>
	            <li>
	                <label>收货地址：</label>
	                <select id="province" name="province"></select>
	                <select id="city" name="city">
	                    <option value="0">--请选择城市--</option>
	                </select>
	                <select id="area" name="area">
	                    <option value="0">--请选择地区--</option>
	                </select>
	            </li>
	            <li>
	                <label for="addr_addr">详细地址：</label>
	                <input id="addr_addr" name="addr" style='width: 480px;' type="text" placeholder="请输入详细地址（街道、门牌等）" />
	            </li>
	            <li class="addr_btn">
	                <a href="javascript:addAddr()" >添加收货地址</a>
	            </li>
	        </ul>
	    </form>
	</div>
	
	<!-- 支付方式 -->	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
	    <div class="pay_style_con clearfix">
	        <input type="radio" name="pay_style" checked>
	        <label class="cash">货到付款</label>
	        <input type="radio" name="pay_style">
	        <label class="weixin">微信支付</label>
	        <input type="radio" name="pay_style">
	        <label class="zhifubao"></label>
	        <input type="radio" name="pay_style">
	        <label class="bank">银行卡支付</label>
	    </div>
	</div>
	
	<!-- 商品列表 -->
	<h3 class="common_title">商品列表</h3>
	<div class="common_list_con clearfix" id="order_list">
	    <ul class="goods_list_th clearfix">
	        <li class="col01">商品名称</li>
	        <li class="col02">商品单位</li>
	        <li class="col03">商品价格</li>
	        <li class="col04">数量</li>
	        <li class="col05">小计</li>		
	    </ul>
	    <ul class="goods_list_td clearfix" v-for="(item, index) in products" :data-cno="item.cno">
	        <li class="col01">{{index + 1}}</li>			
	        <li class="col02"><img :src="'../' + item.pic"></li>
	        <li class="col03">{{item.pname}}</li>
	        <li class="col04">{{item.weight}}</li>
	        <li class="col05">{{item.price}}</li>
	        <li class="col06">{{item.num}}</li>
	        <li class="col07" v-html="(item.price * item.num).toFixed(2) + '元'"></li>	
	    </ul>
	</div>
	 
	<!-- 金额结算 -->	
	<h3 class="common_title">总金额结算</h3>
	<div class="common_list_con clearfix">
	    <div class="settle_con">
	        <div class="total_goods_count">共<em id="totalcount">{{totalCount}}</em>件商品，总金额<b id="total_price">{{totalPrice}}</b></div>
	        <div class="transit">运费：<b>10元</b></div>
	        <div class="total_pay">实付款：<b id="total_pay">{{totalPrice + 10}}元</b></div>
	    </div>
	</div>
	<div class="order_submit clearfix">
	    <a href="javascript:payOrder()" id="order_btn">提交订单</a>
	</div>	
</article> 	  
    
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/hander.js"></script>
<script type="text/javascript" src="js/addr.js"></script>
<script type="text/javascript">

let app = new Vue({
	el:"#app",
	data: {
		products: [],
		addrs: [],
		totalCount: 0,
		totalPrice: 0
	},
	watch: {
		addrs: {
			handler: function(newData, oldData){
				this.$nextTick(() =>{
					bindInfo();
				})
			},
			deep: true
		}
	},
	mounted: function(){
		let cnos = localStorage.getItem("cnos");
		if(!cnos){
			showmsg("请先选择你要结算的商品...", "yellow", () => {location.href="cart.html"});
			return;
		}
		
		axios.post("cart/findByCnos", qs.stringify({cnos: cnos})).then( rt => {
			if(rt.status == 200){
				if(rt.data.code == 200){
					this.products = rt.data.data;
					this.products.forEach((item, index) => {
						item.num = parseInt(item.num);
						this.totalCount += item.num;
						this.totalPrice += item.num * item.price;
					})
					this.totalPrice = parseFloat(this.totalPrice.toFixed(2));
					return;
				}
			}
		})
		
		axios.get("addr/finds").then(rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.addrs = rt.data.data;
				this.$nextTick(function() {
					bindInfo();
				})
				return;
			}
			this.addrs = []
		})
	}
})

function addAddr(){
	let objs = $("#myform input, #myform select");
	for(let i = 0, len = objs.length; i < len; ++i){
		if($.trim(objs[i].value) == "" || objs[i].value == "--请选择省份--"){
			showmsg("您输入的信息不完整...", "yellow");
			return;
		}
	}
	$.post("addr/add", $("#myform").serialize(), rt => {
		if(rt.code == 200){
			let obj = {ano: rt.data};
			obj.name = $.trim($("#addr_name").val());
			obj.tel = $.trim($("#addr_tel").val());
			obj.province = $.trim($("#addr_province").val());
			obj.city = $.trim($("#addr_city").val());
			obj.area = $.trim($("#addr_area").val());
			obj.addr = $.trim($("#addr_addr").val());
			obj.flag = 0;
			app.$data.addrs.push(obj);
			$("#myform")[0].reset();
			hiddenDiv();
			return;
		}
		showmsg("添加送货地址失败...", "red");
	}, "json");
}

function bindInfo(){
	$("#addr_list>dd").unbind();
	$("#addr_list>dd").click(function(){
		$("#addr_list>dd").removeClass("current_location");
		$(this).addClass("current_location");
	})
}

function showAddrDiv() {
	$("#addr_div").css("display", "block");
}

function hiddenDiv() {
	$("#addr_div").css("display", "none");
}

function payOrder(){
	let objs = [];
	$(".goods_list_td").each(function() {
		objs.push($(this).data("cno"));
	})
	let ano = $("#addr_list>dd[class='current_location']").data("ano");
	if(!ano){
		showmsg("请选择收货地址..." + "yellow");
		return;
	}
	
	let obj = {"objs": objs, ano: ano};
	$.post("order/add", obj, rt => {
		if(rt.code == 200){
			console.log(rt.data);
			//http://localhost:8080/ssm/alipay/pay/fc8b3a42-a723-4c8d-aad5-c05b1b2aeb90/0
			localStorage.removeItem("cnos");
			showmsg("下单成功，请支付..." , "green", function() {
				location.href="alipay/pay/" + rt.data.ono + "/" + rt.data.totalPrice;
			})
			return;
		}
		showmsg("下单失败，请稍后重试...", "red");
	}, "json");
}
</script>
</body>
</html>
